<template>
	<view class="todo-iframe" :style="{marginTop:h3}">
		<view class="nav" :style="{height:h2}">
			<view class="n-sub">
				<view class="n-back" @click="onReturn">
					<view class="back"></view>
				</view>
				<text>我的待办</text>
				<navigator :url="url">
					<uni-icons size="23" type="search"></uni-icons>
				</navigator>
			</view>
		</view>
		<scroll-view scroll-y="true" lower-threshold="10" :style="{height:h}" @scrolltolower="onScrToLower">
			<view class="iframe-items" v-for="(item,index) in items" :key="index" @click.stop="onNavTo(item)">
				<view class="items-img">
					<image src="@/static/images/icons/sml/icon-sml-ok.png" mode="widthFix"></image>
				</view>
				<view class="items-item">
					<view class="item-title">
						{{item.TaskCreateUser}}提交的{{item.BusinessName}}申请
					</view>
					<view class="item-row">
						内容：{{item.Content}}
					</view>
					<view class="item-row">
						创建时间：{{item.Createtime}}
					</view>
					<view class="items-dt">
						<view class="dt-updatetime">
							{{_retFormatYmdt(item.Createtime)}}<text>最后更新</text>
						</view>
						<view class="dt-statusname">
							{{item.Status_Name}}
						</view>
					</view>
				</view>
			</view>
			<view class="todolist-error" v-show="items.length==0">
				{{errorTip}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let pageApp = getApp();
	let tmpItems = [];
	import {
		todoList
	} from '@/js/app.js'
	export default {
		data() {
			return {
				intPageIndex: 1,
				items: [],
				h: "1000px",
				h2: "0px",
				h3: "0px",
				errorTip: "没有找到数据",
				url: "./TodoListSearch",
				seletodolist: {},
				blnMore: true
			}
		},
		onShow: function() {
			uni.$on("seletedTodoList", (d) => {
				this.seletodolist = d;
			})
			this.intPageIndex = 1;
			this.blnMore = true;
			this.items = [];
			this.getToDoList(this.intPageIndex);
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.h = res.windowHeight + "px";
					this.h2 = res.statusBarHeight + 50 + "px";
					this.h3 = this.h2;
				}
			})
		},
		methods: {
			_retFormatYmdt(dt) {
				return (dt) ? this.retFormatYmdt(dt) : "";
			},
			onReturn() {
				uni.navigateBack({
					delta: 1
				})
			},
			onNavTo(item) {
				let url = "";
				for (var i in todoList.pagePath) {
					if (i.toLowerCase() == item.AppUrlFile.toLowerCase()) {
						url = todoList.pagePath[i].path;
						break;
					}
				}
				uni.navigateTo({
					url: url + "?id=" + item.BusinessID
				})
			},
			onScrToLower() {
				if (this.blnMore) {
					uni.showToast({
						icon: 'none',
						title: '正在加载更多...'
					})
					this.intPageIndex++;
					this.getToDoList(this.intPageIndex);
				}
			},
			getToDoList(intPageIndex) {
				let _data = {
					"page": intPageIndex,
					"rows": 10
				}
				if (this.seletodolist.hasOwnProperty("BusinessName")) {
					_data.BusinessName = this.seletodolist.BusinessName
				}
				if (this.seletodolist.hasOwnProperty("TaskCreateUser")) {
					_data.TaskCreateUser = this.seletodolist.TaskCreateUser
				}
				if (this.seletodolist.hasOwnProperty("Createtime")) {
					_data.Createtime = this.seletodolist.Createtime
				}
				if (this.seletodolist.hasOwnProperty("Updatetime")) {
					_data.Updatetime = this.seletodolist.Updatetime
				}
				let apiData = {
					url: pageApp.globalData.url + "/ToDoListList",
					data: _data,
					success: (d) => {
						tmpItems = d.data.data.items;
						if (tmpItems.length) {
							this.items = this.items.concat(tmpItems);
						} else {
							uni.showToast({
								icon: "none",
								title: "没有找到数据",
								success: () => {
									this.blnMore = false;
								}
							})
						}
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}



	.n-sub {
		display: flex;
		margin-top: 20rpx;
		justify-content: center;
	}

	.n-back {
		left: 16rpx;
		position: absolute;
	}

	.back {
		width: 26rpx;
		height: 26rpx;
		border-left: solid 6rpx #000000;
		border-top: solid 6rpx #000000;
		transform: rotateZ(-45deg);
	}

	.n-back image {
		width: 50rpx;
	}

	.n-sub text {
		font-size: 32rpx;
		font-weight: 700;
		color: #000000;
	}

	.n-sub navigator {
		position: absolute;
		right: 10rpx;
	}

	.w-box-area-add-btn {
		width: 55rpx;
		text-align: center;
		font-size: 50rpx;
		height: 55rpx;
		background-color: #4497e1;
		color: #fff;
		border-radius: 50%;
	}

	.iframe-items {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		border: solid 2rpx #F1F5F6;
		display: flex;
	}

	.todolist-error {
		margin: 20rpx 0;
		text-align: center;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.items-item {
		width: 100%;
	}

	.items-img {
		width: 34rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		border-radius: 50%;
		padding: 10rpx;
		background-color: #3396FB;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.items-img image {
		width: 100%;
	}

	.item-title {
		font-weight: 700;
		font-size: 34rpx;
		color: #000000;
	}

	.item-row {
		font-size: 28rpx;
		color: #707070;
	}

	.items-dt {
		margin-top: 16rpx;
		padding-top: 10rpx;
		border-top: solid 2rpx #F1F5F6;
		font-size: 26rpx;
		color: #707070;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dt-updatetime text {
		margin-left: 20rpx;
	}

	.dt-statusname {
		margin-right: 10rpx;
		color: #3396FB;
		font-weight: 700;
		font-size: 24rpx;
		background-color: #d5e2ff;
		border-radius: 10rpx;
		padding: 0 14rpx;
	}
</style>
